function Spirit(canvas) {
	this.canvas = canvas;
	this.cxt = canvas.getContext("2d");
	this.rand = 0;
	this.add = 1;
	this.r = 0xFF;
	this.g = 0x00;
	this.b = 0x00;
	this.level = 0;
	this.draw = function(self) {
		if(self.level == 0){
			self.g++;
			if(self.g==0xFF){
				self.level++;
			}
		}else if(self.level == 1){
			self.r--;
			if(self.r==0x00){
				self.level++;
			}
		}else if(self.level == 2){
			self.b++;
			if(self.b==0xFF){
				self.level++;
			}
		}else if(self.level == 3){
			self.g--;
			if(self.g==0x00){
				self.level++;
			}
		}else if(self.level == 4){
			self.r++;
			if(self.r==0xFF){
				self.level++;
			}
		}else if(self.level == 5){
			self.b--;
			if(self.b==0x00){
				self.level=0;
			}
		}
		self.cxt.strokeStyle = 'rgba('+self.r+','+self.g+','+self.b+',0.5)';
		self.cxt.fillStyle = "rgba(255,255,255,0.05)"
		if (self.rand > 40) {
			self.add = -1;
		}
		if (self.rand < 1) {
			self.add = 1;
		}
		self.rand += self.add;
		self.cxt.fillRect(0, 0, 80, 80);
		self.cxt.beginPath();
		self.cxt.arc(40, 40, self.rand, 0, Math.PI * 2, false);
		self.cxt.closePath();
		self.cxt.stroke();
	}
	this.cxt.fillStyle = "rgb(255,255,255)";
	this.cxt.fillRect(0, 0, 80, 80);
	setInterval(this.draw, 30, this);
}

window.addEventListener('load', function() {
	var canvas = document.getElementById('spirit');
	var spiritMsg = document.getElementById('spirit-msg');
	var isShowMsg = false;
	
	$(canvas).bind('click',function(){
		if(isShowMsg){
			$(spiritMsg).fadeOut();
			isShowMsg = false;
		}else{
			$(spiritMsg).fadeIn();
			isShowMsg = true;
		}
	});
	
	new Spirit(canvas);
	$('#input-msg-text').bind('keypress',function(event){
		if(event.keyCode==13){
			var str = $('#input-msg-text').val();
			if(str!=''){
				$('#msgs').append('<div>'+str+'</div>');
				$('#input-msg-text').val('');
				$('#msgs')[0].scrollTop = $('#msgs')[0].scrollHeight;
				$.post('ajax_tuling',{'info':encodeURIComponent(str)},function(data,status){
					if (status == 'success') {
						$('#msgs').append('<div class="msg-result">'+data.text+'</div>');
						$('#msgs')[0].scrollTop = $('#msgs')[0].scrollHeight;
					}
				});
			}
		}
	});
}, false);